<!--
 * @Author: ChunLai
 * @Date: 2022-04-19 10:12:25
 * @LastEditTime: 2025-09-10 17:23:25
 * @Description: 可选责任列表 --- 类型2(责任含有保额/保费相关信息字段处理)(长城00536/ 华安P091605)
 * @FilePath: \02.bldinsure\src\views\count\components\LiabilityLists2.vue
-->
<template>
  <div class="w100">
    <div
      class="duty_list_li w100"
      v-for="(item, indx) in dutyList"
      :key="`${item.dutyCode || item.name}`"
    >
      <div class="flex-lr pd8_tb lh_1-5">
        <span class="black3 duty_item_label">{{ item.label }}</span>
        <div v-if="item.type == 'checkbox'">
          <van-checkbox
            :value="item.isChecked"
            checked-color="#f54040"
            @click="handleChangeDuty(!item.isChecked, indx, 'isChecked')"
          >
          </van-checkbox>
        </div>
        <template v-if="item.options">
          <div class="flex-lr subject-btns" v-if="item.options.length === 2">
            <span
              class="flex-aj_cc btn-span"
              :class="{ 'btn-y': opt.value === item.value }"
              @click="handleChangeDuty(opt.value, indx, 'value')"
              v-for="(opt, oidx) in item.options"
              :key="`${oidx}`"
            >
              {{ opt.label }}
            </span>
          </div>
          <div class="drop-down" v-else>
            <select
              class="jf_select"
              :value="item.value"
              @change="handleChangeDuty($event.target.value, indx, 'value')"
            >
              <option
                v-for="(opt, idx) in item.options"
                :key="idx"
                :value="opt.value"
                v-text="opt.label || opt.name"
              ></option>
            </select>
            <span class="ms-row-icon"></span>
          </div>
        </template>
        <div class="flex-aj_cc btn-span btn-y" v-if="item.type == 'text'">
          {{ item.value }}
        </div>
      </div>

      <div v-if="item.isChecked">
        <div class="flex-lr cellItem">
          <span class="black9">基本保额</span>
          <div
            class="duty_amnt_input"
            :class="item.amntType ? 'disabled' : 'can_input'"
          >
            <input
              type="number"
              :placeholder="'请输入保额'"
              :disabled="item.amntType"
              class="baofei"
              v-model="item.amnt"
              @blur="handleChangeDutyAmnt($event.target.value, item, indx)"
            />元
          </div>
        </div>
        <div class="flex-lr cellItem" v-if="item.prem">
          <span class="black9">年交保费</span>
          <div class="flex-lr">{{ item.prem }} 元</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  name: "LiabilityLists2",
  props: {
    insuData: {
      type: Object,
      default: () => {},
    },
  },
  computed: {
    ...mapGetters({
      mainInsu: "risks/mainInsu",
    }),
    dutyList() {
      let res = [];
      if (this.insuData.liabilityList) {
        res = this.insuData.liabilityList;
      }
      return res;
    },
  },
  data() {
    return {};
  },
  methods: {
    handleChangeDutyAmnt(value, item, indx) {
      let errMsg = "";
      if (item.minamnt && value < item.minamnt) {
        value = item.minamnt;
        errMsg = `${item.label}\n最低保额${item.minamnt}元`;
      }
      if (item.maxamnt && value > item.maxamnt) {
        value = item.maxamnt;
        errMsg = `${item.label}\n最高保额${item.maxamnt}元`;
      }
      if (item.baseLevel && Number(value) % item.baseLevel !== 0) {
        value = item.minamnt || item.maxamnt;
        errMsg = `${item.label}\n保额需为${item.baseLevel}元的整数倍`;
      }
      if (errMsg) {
        this.$toast(errMsg);
      }
      this.handleChangeDuty(value, indx, "amnt");
    },
    handleChangeDuty(val, index, target) {
      let duty = JSON.parse(JSON.stringify(this.dutyList));
      // 惠泽选择校验
      if (duty[index].name === "policyholderExemption" && val === "含") {
        let bbMsgRelation = "4";
        let urlHash = window.location.hash;
        if (urlHash.indexOf("#/count") !== -1) {
          bbMsgRelation = this.relation;
        } else {
          const insertParams = this.$getMessage("insertParams"),
            bbMsg = insertParams.insured;
          bbMsgRelation = bbMsg.relationToAppnt.toString();
        }
        if (this.mainInsu[0].payendyear === "趸交") {
          return this.$toast("主险缴费期间为趸交时,不可能选");
        }
        if (bbMsgRelation === "4") {
          return this.$toast("投保关系为本人时,不可能选");
        }
      }

      let mustDuty = duty.find((item) => item.type == "must");
      if (mustDuty) {
        let mustAmnt = this.insuData.amnt;
        mustAmnt = mustDuty.amnt;
      }
      // console.log(mustAmnt);
      duty[index][target] = val;
      this.$store.dispatch("risks/setRisks", {
        varietyCode: this.insuData.varietyCode,
        type: "liabilityList",
        val: duty,
      });
      // console.log(val, index, item, key);
      this.$forceUpdate();
    },
  },
};
</script>

<style lang="less" scoped>
.cellItem {
  min-height: 30px;
}

.baofei {
  width: 100%;
  height: 30px;
  border: none;
  text-align: right;
  padding-right: 6px;
}

.duty_item_label {
  max-width: 70%;
}

.duty_list_li:not(:last-child) {
  border-bottom: 1px dashed #fee0d1;
}

.subject-btns {
  justify-content: flex-end;
  width: 90px;
  margin-top: 6px;
}

.btn-span {
  min-width: 40px;
  height: 30px;
  color: #ffffff;
  border-radius: 4px;
  padding: 0 4px;
  background-color: #c2c2c2;

  &:not(:last-child) {
    margin-right: 6px;
  }

  &.btn-y {
    background-color: #fb8c89;
  }
}

.drop-down {
  display: flex;
  align-items: center;

  .jf_select {
    -webkit-appearance: none;
    appearance: none;
    outline: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    background-color: transparent;
    height: 30px;
    font-size: 14px;
    color: #333;
    border: 0;
    direction: rtl;
  }
}
.duty_amnt_input {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  &.can_input {
    border-bottom: 1px solid #e9ecee;
  }
}
</style>
